{% load job_extras %}
<script type="text/javascript" charset="utf-8" src="/../peakAnalyzer/static/datatables1.9.4/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="/../peakAnalyzer/static/datatables1.9.4/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8" language="javascript" src="/../peakAnalyzer/static/datatables1.9.4/media/js/DT_bootstrap.js"></script> 
<link rel="stylesheet" type="text/css" href="/../peakAnalyzer/static/datatables1.9.4/media/css/DT_bootstrap.css">
<script type="text/javascript" charset="utf-8" language="javascript" src="/../peakAnalyzer/static/js/jquery.form.js"></script>

<div>
<form action="/peakAnalyzer/regular/jobManagement/" id="job_management_form" method="post" onsubmit="return checkCheckboxes();">
<table class="table table-bordered" id="table_joblist">
<thead><tr><th>Select</th><th>JobId</th><th>Title</th><th>Submit Date</th><th>Status</th><th></th></tr></thead>
<tbody>
{% for job in jobs_list %}

<tr id=job__{{ job.id }} class={{css|lookup:job.status}} ><td><input name="job" class="checkbox_job" value={{job.id}} type="checkbox" id=cj__{{job.id}} ></td><td>{{job.id}} </td><td>{{job.jobtitle}}</td><td>{{job.submitDate}}</td><td>{{job.status}}</td> 

<td>
{% ifequal job.status "Completed" %}
    <a href="../../jobserver-regular/{{job.id}}/viewresult/" target="blank">View Results</a>
{% endifequal %}

</td>
</tr>
{% endfor %}

</tbody>
</table>
<div id="buttons">
  <button class="btn btn-info" type="button" onclick="refresh_table()">Refresh <span class='icon-refresh icon-white'></span></button>
 <button class="btn btn-inverse" name="delete" type="submit" id="button_deletejob" onclick="return confirm('Proceed to delete?');" >Delete <span class='icon-trash icon-white'></span></button>
 <button class="btn btn-warning" name="rerun" type="submit" id="button_rerunjob" >Re-run <span class='icon-repeat icon-white'></span></button>
<!--  <button class="btn" name="peaksetoverlap" type="submit" id="button_peaksetoverlap" ><a href="#modal-gallery"  data-toggle="modal" data-selector="div.gallery-item">Peakset Overlap <span class='icon-align-left icon-white'></span></button> -->
</div>
</form>
<script>
		$('#table_joblist').dataTable({
			"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
			"sPaginationType": "bootstrap",
			"aaSorting": [[ 1, "desc" ]],
			"aoColumns":[{"bSortable": false },
						{ "bSortable": "numeric"},
						{ "bSortable": "string" },
						{  "bSortable": false },
						{  "bSortable": "string" },
						{  "bSortable": false }]
			});

		 $('#job_management_form').ajaxForm(function() { 
		    	refresh_table()
            }); 
</script>

<script>
function confirmSubmit() {
  if (confirm("Proceed to delete?")) {
    document.getElementById("job_management_form").submit();
  }
  return false;
}

function checkCheckboxes(){
 var checkboxes=document.getElementsByName("job");
 var count=0;
 for(i=0; i<checkboxes.length;i++){
 	if(checkboxes[i].checked==true){
 		count++;
 	}
 }
 if(count=0){
	alert("Please select at least one file!");
	return false;	 
 }else{
 	return true;
 }
}
</script>
</div>